<template>
    <div class="gimbal" :style="{
        '--bgColor': bgColor,
        '--scale': scale,
        '--width': width == 'auto' ? 'auto' : `${width}px`,
        '--height': height == 'auto' ? 'auto' : `${height}px`
    }">
        <div class="close" v-if="closeGimbalPanel">
            <img :src="requireImgUrl('image', '云台_收起')" alt="收起" title="收起" @click="closeGimbalPanel(false)">
        </div>
        <div class="control-top">
            <div class="limit-box">
                <div class="block-center"></div>
                <img class="up-rotateimage" :src="requireImgUrl('image', '上')" alt="" @click="defineEx('上')">
                <img class="down-rotateimage" :src="requireImgUrl('image', '下')" alt="" @click="defineEx('下')">
                <img class="left-rotateimage" :src="requireImgUrl('image', '右')" alt="" @click="defineEx('左')">
                <img class="right-rotateimage" :src="requireImgUrl('image', '左')" alt="" @click="defineEx('右')">
                <div class="up" :style="{
                    backgroundColor: activeIndex == '上' ? 'rgba(23, 114, 153, 1)' : 'rgba(15, 76, 102, 1)'
                }">
                </div>
                <div class="down" :style="{
                    backgroundColor: activeIndex == '下' ? 'rgba(23, 114, 153, 1)' : 'rgba(15, 76, 102, 1)'
                }">
                </div>
                <div class="left" :style="{
                    backgroundColor: activeIndex == '右' ? 'rgba(23, 114, 153, 1)' : 'rgba(15, 76, 102, 1)'
                }">
                </div>
                <div class="right" :style="{
                    backgroundColor: activeIndex == '左' ? 'rgba(23, 114, 153, 1)' : 'rgba(15, 76, 102, 1)'
                }">
                </div>
            </div>
        </div>
        <div class="control-bottom">
            <div class="control-bottom-image">
                <img :src="requireImgUrl('image', '调焦_减')" alt="" @click="defineEx('减焦距')">
            </div>
            <div class="title">
                调焦
            </div>
            <div class="control-bottom-image">
                <img :src="requireImgUrl('image', '调焦_加')" alt="" @click="defineEx('加焦距')">
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { requireImgUrl } from '@/utils/localurl/metaUrl';
import { ref, toRefs } from 'vue';
import emits from '@/utils/emits';
const timer = ref(null);
const activeIndex = ref('');
const defineEx = (str: string) => {
    activeIndex.value = str;
    if (timer.value) {
        clearTimeout(timer.value);
    };
    timer.value = setTimeout(() => {
        emits.emit('HANDEL_GIMBAL', str);
        activeIndex.value = '';
    }, 200)


};
const props = defineProps({
    dialogShow: {
        type: Boolean,
        default: () => false
    },
    scale: {
        type: Number,
        default: () => 1
    },
    bgColor: {
        type: String,
        default: () => "rgba(4, 19, 31, 1)"
    },
    closeGimbalPanel: {
        type: Function
    },
    width: {
        type: String,
        default: () => "auto"
    },
    height: {
        type: String,
        default: () => "auto"
    }
});

const { width, height, scale, bgColor, closeGimbalPanel } = toRefs(props);




</script>
<style lang="scss" scoped>
.gimbal {
    width: var(--width);
    height: var(--height);
    background-color: var(--bgColor);
    transform: scale(var(--scale));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    // background-color: pink;


    .close {
        position: absolute;
        top: 1%;
        right: 1%;
        cursor: pointer;
    }

    .control-top {
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;

        .limit-box {
            position: relative;
            width: 150px;
            height: 150px;

            .block-center {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                position: absolute;
                top: 43px;
                left: 48px;
                background-color: var(--bgColor);
                z-index: 2;
            }

            .up-rotateimage {
                width: 24px;
                height: 24px;
                display: block;
                z-index: 2;
                position: absolute;
                left: 65px;
                top: 12px;
                cursor: pointer;
                user-select: none;
            }

            .down-rotateimage {
                width: 24px;
                height: 24px;
                display: block;
                z-index: 2;
                position: absolute;
                left: 65px;
                top: 111px;
                cursor: pointer;
                user-select: none;

            }

            .left-rotateimage {
                width: 24px;
                height: 24px;
                display: block;
                z-index: 2;
                position: absolute;
                left: 17px;
                top: 65px;
                cursor: pointer;
                user-select: none;
                transform: rotate(56deg);
            }

            .right-rotateimage {
                width: 24px;
                height: 24px;
                display: block;
                z-index: 2;
                position: absolute;
                left: 116px;
                top: 62px;
                cursor: pointer;
                user-select: none;
                transform: rotate(58deg);
            }

            .up {
                width: 70px;
                height: 70px;
                position: absolute;
                top: -14px;
                left: 42px;
                background-color: rgba(52, 102, 102, 1);
                border-radius: 100% 0 0 0;
                transform-origin: center center;
                transform: rotate(45deg);


            }

            .down {
                position: absolute;
                width: 70px;
                height: 70px;
                top: 94px;
                left: 42px;
                background-color: rgba(52, 102, 102, 1);
                border-radius: 100% 0 0 0;
                transform-origin: center center;
                transform: rotate(225deg);



            }

            .left {
                position: absolute;
                width: 70px;
                height: 70px;
                top: 40px;
                left: 94px;
                background-color: rgba(52, 102, 102, 1);
                transform-origin: center center;
                transform: rotate(135deg);
                border-radius: 100% 0 0 0;
                z-index: 1;


            }

            .right {
                position: absolute;
                width: 70px;
                height: 70px;
                top: 40px;
                left: -11px;
                transform-origin: center center;
                transform: rotate(315deg);
                background-color: rgba(52, 102, 102, 1);
                border-radius: 100% 0 0 0;



            }

        }

    }

    .control-bottom {
        width: 100%;
        height: clamp(3.125rem, 2.6vw, 6.25rem);
        margin-top: clamp(0.625rem, 0.52vw, 1.25rem);
        display: flex;
        align-items: center;
        justify-content: center;


        .control-bottom-image {
            cursor: pointer;
        }

        .title {
            color: white;
            margin-left: clamp(1.25rem, 1.04vw, 2.5rem);
            margin-right: clamp(1.25rem, 1.04vw, 2.5rem);
        }
    }
}
</style>